<!DOCTYPE html>
<html>
<head>
<title>Smartao首页</title>
<jsp:include page="include/header.jsp" />
</head>
<body class="home">
	<div id="header">
		<h1><a href="#">Smartao首页</a></h1>		
	</div>
	<div id="search">
		<input type="text" placeholder="Search here..." />
		<button title="" class="tip-right" type="submit" data-original-title="Search">
			<i class="icon-search icon-white"></i>
		</button>
	</div>
	<div class="navbar navbar-inverse" id="user-nav">
	    <ul class="nav btn-group">
	        <li class="btn btn-inverse">
		        <a href="#" title="">
		        	<i class="icon icon-user"></i> 
		        	<span class="text"><sec:authentication property="principal" /></span>
		        </a>
	        </li>
	        <li id="menu-messages" class="btn btn-inverse dropdown">
		        <a class="dropdown-toggle" data-target="#menu-messages" data-toggle="dropdown" href="#">
		        	<i class="icon icon-envelope"></i> 
		        	<span class="text">Messages</span> 
		        	<span class="label label-important">5</span> 
		        	<b class="caret"></b>
		        </a>
	            <ul class="dropdown-menu">
	                <li><a href="#" title="" class="sAdd">new message</a></li>
	                <li><a href="#" title="" class="sInbox">inbox</a></li>
	                <li><a href="#" title="" class="sOutbox">outbox</a></li>
	                <li><a href="#" title="" class="sTrash">trash</a></li>
	            </ul>
	        </li>
	        <li class="btn btn-inverse">
	        	<a href="admin/main.action" title="系统设置">
		        	<i class="icon icon-cog"></i> 
		        	<span class="text">系统设置</span>
	        	</a>
	        </li>
	        <li class="btn btn-inverse">
	        	<a href="smartao_logout" title="注销">
	        		<i class="icon icon-share-alt"></i> 
	        		<span class="text">注销</span>
	        	</a>
	        </li>
	    </ul>
	</div>
	<div id="sidebar">
		<a class="visible-phone" href="#"><i class="icon icon-home"></i> Dashboard</a>
		<ul style="display: block;">
			<li class="active"><a href="index.html"><i class="icon icon-home"></i> <span>Dashboard</span></a></li>
			<li class="submenu">
				<a href="#"><i class="icon icon-th-list"></i> <span>Form elements</span> <span class="label">3</span></a>
				<ul>
					<li><a href="form-common.html">Common elements</a></li>
					<li><a href="form-validation.html">Validation</a></li>
					<li><a href="form-wizard.html">Wizard</a></li>
				</ul>
			</li>
			<li><a href="buttons.html"><i class="icon icon-tint"></i> <span>Buttons &amp; icons</span></a></li>
			<li><a href="interface.html"><i class="icon icon-pencil"></i> <span>Interface elements</span></a></li>
			<li><a href="tables.html"><i class="icon icon-th"></i> <span>Tables</span></a></li>
			<li><a href="grid.html"><i class="icon icon-th-list"></i> <span>Grid Layout</span></a></li>
			<li class="submenu">
				<a href="#"><i class="icon icon-file"></i> <span>Sample pages</span> <span class="label">4</span></a>
				<ul>
					<li><a href="invoice.html">Invoice</a></li>
					<li><a href="chat.html">Support chat</a></li>
					<li><a href="calendar.html">Calendar</a></li>
					<li><a href="gallery.html">Gallery</a></li>
				</ul>
			</li>
			<li>
				<a href="charts.html"><i class="icon icon-signal"></i> <span>Charts &amp; graphs</span></a>
			</li>
			<li>
				<a href="widgets.html"><i class="icon icon-inbox"></i> <span>Widgets</span></a>
			</li>
		</ul>
	</div>
	<div id="content">
		
	</div>
</body>
</html>
<script>
$('.submenu > a').click(function(e){
	e.preventDefault();
	var submenu = $(this).siblings('ul');
	var li = $(this).parent('li');
	
    $('#sidebar li').removeClass('active');
    
	if(li.hasClass('open')){
		if(($(window).width() > 768) || ($(window).width() < 479)) {
			submenu.slideUp();
		} else {
			submenu.fadeOut(250);
		}
		li.removeClass('open');
	} else{
		if(($(window).width() > 768) || ($(window).width() < 479)) {
			submenu.slideDown();
		} else {
			submenu.fadeIn(250);
		}
		li.addClass('open');	
	}
	li.addClass('active');
});

var ul = $('#sidebar > ul');

// === Resize window related === //
$(window).resize(function(){
	if($(window).width() > 479)
	{
		ul.css({'display':'block'});	
		$('#content-header .btn-group').css({width:'auto'});		
	}
	if($(window).width() < 479)
	{
		ul.css({'display':'none'});
		fix_position();
	}
	if($(window).width() > 768)
	{
		$('#user-nav > ul').css({width:'auto',margin:'0'});
           $('#content-header .btn-group').css({width:'auto'});
	}
});

if($(window).width() < 468){
	ul.css({'display':'none'});
	fix_position();
}
if($(window).width() > 479){
   $('#content-header .btn-group').css({width:'auto'});
	ul.css({'display':'block'});
}
</script>